<template>
  <div v-loading="loading" class="groupAuth">
    <div class="groupAuthHeader">
      <span class="headerSpan">拥有权限</span>
      <el-button
        v-if="!isEdit"
        :disabled="groupInfo.admingroupParentId === '-1' || $store.state.user.groupId === groupInfo.admingroupId"
        @click="editClick"
      >修改</el-button>
      <el-button v-if="isEdit" v-preventReClick="3000" type="primary"
                 @click="save">保存</el-button>
      <el-button v-if="isEdit" @click="cancelBtn">取消</el-button>
    </div>
    <div class="groupAuthBody">
      <AuthorizScope
        ref="authorizScope"
        v-model="authorizScope"
        :is-edit="isEdit"
        :group-id="groupId"
        @getLoading="getLoading"
      />
      <AuthorizFeatures
        ref="authorizFeatures"
        v-model="authorizFeatures"
        :is-edit="isEdit"
        :group-id="groupId"
        @getLoading="getLoading"
      />
      <ManageScope
        ref="manageScope"
        v-model="manageScope"
        :is-edit="isEdit"
        :group-id="groupId"
        @getLoading="getLoading"
      />
      <ManageFeatures
        ref="manageFeatures"
        v-model="manageFeatures"
        :is-edit="isEdit"
        :group-id="groupId"
        @getLoading="getLoading"
      />
    </div>
  </div>
</template>

<script>
import adminManageApi from '@/framework/api/authCenter/adminManage/adminManage'
import AuthorizScope from './authorizScope.vue'
import AuthorizFeatures from './authorizFeatures.vue'
import ManageScope from './manageScope.vue'
import ManageFeatures from './manageFeatures.vue'

export default {
  name: 'GroupAuth',
  components: { AuthorizScope, AuthorizFeatures, ManageScope, ManageFeatures },
  props: {
    groupInfo: {
      type: Object,
      default: () => {
        return {}
      }
    },
    groupId: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      loading: true,
      authorizScope: '',
      authorizFeatures: [],
      manageScope: '',
      manageFeatures: [],
      isEdit: false,
      currentAuthorizScope: [],
      parentAuthorizFeatures: [],
      currentAuthorizFeatures: [],
      currentManageScope: [],
      currentManageFeatures: [],
      num: 0
    }
  },
  watch: {
    groupId(val) {
      this.groupId = val
      this.isEdit = false
      this.loading = true
    }
  },
  created() {
    // this.getDatas()
  },
  methods: {
    editClick() {
      this.isEdit = true
    },
    cancelBtn() {
      this.$dtMessageBox({
        title: '提示',
        message: '取消后，您的权限设置将不会保存',
        type: 'warning'
      }).then(() => {
        this.isEdit = false
      })
    },
    getLoading(val) {
      this.num += val
      if (this.num === 4) {
        this.num = 0
        this.loading = false
      }
    },
    save() {
      this.loading = true
      const params = {
        groupId: this.groupId,
        mayAuthorizeScope: this.authorizScope,
        mayAuthorizeFunction: this.authorizFeatures
          .filter((res) => {
            return res.type !== null
          })
          .map((item) => {
            return { appId: item.id, version: item.version }
          }),
        managingScope: this.manageScope,
        managingFunction: {
          appList: this.manageFeatures
            .filter((res) => {
              return res.type === 1
            })
            .map((item) => {
              return { appId: item.id, version: item.version }
            }),
          menuList: this.manageFeatures
            .filter((res) => {
              return res.type === 2
            })
            .map((item) => {
              return { code: item.code, version: item.version }
            }),
          buttonList: this.manageFeatures
            .filter((res) => {
              return res.type === 3
            })
            .map((item) => {
              return { code: item.code, version: item.version }
            })
        }
      }
      // return
      adminManageApi
        .saveGroupAuthority(params)
        .then((res) => {
          this.isEdit = false
          this.$dtMessage({ message: res.message, type: 'success' })
          this.loading = false
          this.$refs.authorizScope.getDatas()
          this.$refs.authorizFeatures.getDatas()
          this.$refs.manageScope.getDatas()
          this.$refs.manageFeatures.getDatas()
        })
        .catch(() => {
          this.loading = false
        })
    }
  }
}
</script>
<style scoped lang="scss">
.groupAuth {
  animation: groupAuth 1s 1;
}

@keyframes groupAuth {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

.groupAuthHeader {
  margin: 16px 0;
  height: 24px;

  .headerSpan {
    font-size: 16px;
    font-family: HarmonyOS Sans SC-Medium, HarmonyOS Sans SC;
    font-weight: 500;
    color: #131414;
    line-height: 24px;
  }

  button {
    float: right;
    margin-left: 16px;
    height: 24px;
    padding: 0 12px;

    span {
      line-height: 20px;
      font-size: 12px;
    }
  }
}

.groupAuthBody {
}
</style>
